<template>
	<scroll-view class="ss-scroll-navbar" :class="`optionType`+optionType" scroll-x :scroll-left="scrollLeft"
		scroll-with-animation="true">
		<view class="list">
			<view @click="tabChange(index)" :id="'item-' + index" class="item nav-item"
				:class="{current: index === tabCurrentIndex,active:index === tabCurrentIndex}"
				v-for="(item, index) in navArr" :key="index" :style="{
						marginRight:marginRight*2+'rpx',
						backgroundImage: index === tabCurrentIndex && optionType==2?`linear-gradient(to right,${activeColorF || '#fff'} ,${ activeColorS || '#fff'})` : '',
						color:index === tabCurrentIndex?activeText : defaultColor}">
				<view v-if="optionType && optionType!=2" class="after" :class="{op3:optionType==3}" :style="{borderImageSource:optionType==1?`linear-gradient(to right,${activeColorF || '#fff'} ,${ activeColorS || '#fff'})`:'',
						borderImageSlice:1,borderColor:optionType==3?`${activeColorF|| '#fff'}`:''}"></view>
				{{item.text}}
			</view>
		</view>
	</scroll-view>


</template>

<script>
	export default {
		name: 'ss-scroll-navbar',
		props: {
			navArr: {
				type: Array,
				default () {
					return [{
						name: '推荐',
						categoryId: 'recent'
					}]
				}
			},
			defaultColor: {
				type: String,
				default: '#ffffff'
			},
			tabCurrentIndex: {
				type: Number,
				default: 0
			},
			scrollChangeIndex: {
				type: Number,
				default: 0
			},
			color: {
				type: String,
				default: '#ffffff'
			},
			activeText: {
				type: String,
				default: '#ffffff'
			},
			optionType: {
				type: String,
				default: ''
			},
			activeColorF: {
				type: String,
				default: '#ffffff'
			},
			activeColorS: {
				type: String,
				default: '#ffffff'
			},
			marginRight: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				scrollLeft: 0,
				widthList: [],
				screenWidth: 0,
			}
		},
		methods: {
			/**
			 * 导航栏navbar
			 * 点击事件
			 */
			tabChange(index) {
				this.$emit('navbarTap', index);
				var widthArr = this.widthList;
				var scrollWidth = 0;
				for (var i = 0; i < index + 1; i++) {
					scrollWidth += widthArr[i];
				}
				let currentWidth = widthArr[index];
				// scrollView 居中算法
				// 减去固定宽度位移
				// 减去选中的bar的宽度的一半
				scrollWidth -= this.screenWidth / 2;
				scrollWidth -= currentWidth / 2;
				this.scrollLeft = scrollWidth;
			},
			calculateItemWidth() {
				var that = this;
				var arr = [];
				let w = 0;
				this.navArr.forEach((item, index) => {
					let view = uni.createSelectorQuery().in(this).select("#item-" + index);
					view.fields({
						size: true
					}, data => {
						arr.push(data.width);
					}).exec();
				})
				this.widthList = arr;
			},
			calculateWindowWidth() {
				var info = uni.getSystemInfoSync();
				this.screenWidth = info.screenWidth;
			}
		},
		created() {
			var that = this;
			this.calculateWindowWidth();
			setTimeout(function() {
				that.calculateItemWidth();
			}, 1000);
		},
		watch: {
			scrollChangeIndex(val) {
				this.tabChange(val)
			},
		},

	}
</script>

<style lang="scss">
	.ss-scroll-navbar.optionType {
		.nav-item {
			padding: 0;
		}
	}

	.ss-scroll-navbar {
		width: 100%;
		height: 86rpx;
		white-space: nowrap;
		text-align: start;
		line-height: 52rpx;

		.list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 86rpx;
			padding-left: 20rpx;
		}

		::-webkit-scrollbar {
			display: none;
		}


		.nav-item {
			height: 52rpx;
			text-align: center;
			padding: 0rpx 20rpx;
			color: #333;
			display: inline-block;
			position: relative;
			font-size: 32rpx;
			flex-shrink: 0;

			.title {
				line-height: 52rpx;
			}

			.after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4rpx solid #ffffff;
				position: absolute;
				left: 50%;
				bottom: 4rpx;
				transform: translateX(-50%);
				transition: .3s;
			}

			.after.op3 {
				height: 60rpx;
				border: 0px solid;
				border-left: 6rpx solid transparent !important;
				border-top: 6rpx solid transparent !important;
				border-right: 6rpx solid transparent !important;
				border-radius: 50%;
				bottom: -8rpx;

			}

		}

		.current {
			color: #ffffff;
			font-weight: bold;

			.after {
				width: 50%;
			}

			.after.op3 {
				width: 60rpx;
				border: 6rpx solid;
			}
		}
	}

	.optionType1 {
		.item {
			line-height: 64rpx;
			height: 64rpx;
			// padding: 0;
			margin-right: 36rpx;
		}

		.item.active {
			font-weight: 600;
			font-size: 32rpx;
			// border-bottom: 4rpx solid;
		}
	}

	.optionType2 {
		.item.active {
			color: #fff;
			border-radius: 200rpx;
		}
	}

	.optionType3 {
		.item.active {
			font-weight: 600;
			font-size: 32rpx;
		}
	}
</style>